<template>
    <div class="creationPage">
      <div class="filterVue">
        <div style="display: flex">
          <div class="filter">
            <span style="padding-right: 10px">种草官状态</span>
            <el-select v-model="params.status" placeholder="请选择">
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="filter">
            <div style="padding-right: 10px">种草官姓名</div>
            <el-input v-model="params.userName" placeholder="请输入" style="margin-left: 10px; width: 190px" @input="input"></el-input>
          </div>
        </div>
        <div style="display: flex">
          <div class="btn1" @click="search">查询</div>
          <div class="btn1" @click="clearAll">清空</div>
        </div>
      </div>
      <div class="tableVue">
        <div class="tableList">
          <div class="thVue">
            <div class="th">种草官姓名</div>
            <div class="th">发布数量</div>
            <div class="th">成交订单量</div>
            <div class="th">累计收益</div>
            <div class="th">可提现收益</div>

            <div class="th">待结算收益</div>
            <div class="th">已结算收益</div>
            <div class="th">状态</div>
            <div class="th">成为种草官时间</div>
            <div class="th">操作</div>
          </div>
          <div class="tdVue">
            <div class="tdItem" v-for="(item, index) in list" :key="index">
              <div class="td">{{ item.userName }}</div>
              <div class="td">{{ item.noteCount }}</div>
              <div class="td">{{ item.orderCount }}</div>
              <div class="td">{{ item.totalAmount }}</div>
              <div class="td">{{ item.availableAmount }}</div>
              
              <div class="td">{{ item.freezeAmount }}</div>
              
              <div class="td">{{ item.settledAmount }}</div>
              <div class="td">{{ item.status==1 ? "启用" : "禁用" }}</div>
  
              <div class="td">{{ item.createTime }}</div>
              <div class="td">
                <span  style="color: #389bf6; cursor: pointer; font-weight: 600; padding: 0 10px" @click="todo(item)">{{ item.status==1 ? "禁用" : "启用" }}</span>
              </div>
            </div>
          </div>
          <div class="paginationVue">
            <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="params.limit"
              @current-change="pageChange"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { settlementList } from "@/api/creation"
  export default {
    data() {
      return {
        statusList: [{label: "启用", value: 1}, {label: "禁用", value: 0}],
        params: {
          status: '',
          userName: '',
          limit: 15,
          page: 1,
        },
        list: [],
        total: 0,
      };
    },
    created(){
      this.getList()
    },
    methods: {
      search() {
        this.params.page = 1
        this.getList()
      },
      input(){
        if(!this.params.userName) {
          this.params.page = 1
          this.getList()
        }
      },
      todo(item){
        this.$confirm(`确定${item.status==1 ? '禁用该种草官': '启用该种草官'}吗?`, `${ item.status==1 ? '禁用种草官': '启用种草官' }`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$message({
          type: 'success',
          message: '拉黑用户成功!',
        });
      });
      },
      clearAll() {
        this.params = {
          status: '',
          userName: '',
          limit: 15,
          page: 1,
        }
        this.getList()
      },
      getList() {
        settlementList(this.params).then(res=>{
          console.log(res)
          this.list = res.list
          this.total = res.total
          console.log("kkkkkkkk",this.list )
        })
      },
      pageChange(e) {
        console.log(e);
        this.params.page = e;
        this.getList();
      },
    },
  };
  </script>
  
  
  <style lang="scss">
  .creationPage {
    width: 100%;
    height: calc(100vh - 186px);
    background: #fff;
    .filterVue {
      width: 100%;
      height: 62px;
      display: flex;
      align-items: center;
      padding: 15px;
      .filter {
        display: flex;
        align-items: center;
        padding-right: 30px;
      }
      .btn1 {
        width: 60px;
        height: 32px;
        border-radius: 4px;
        line-height: 32px;
        text-align: center;
        background: #2561ef;
        color: #fff;
        margin-right: 10px;
        cursor: pointer;
      }
    }
    .tableVue {
      flex: 1;
      height: calc(100vh - 186px - 62px);
      .thVue {
        width: 100%;
        display: flex;
        height: 70px;
        align-items: center;
        border-bottom: 1px solid #f5f5f5;
        .th {
          flex: 1;
          color: #333333;
          font-weight: 600;
          text-align: center;
        }
        .th:nth-last-child(1) {
          width: 250px;
        }
      }
      .tdVue {
        width: 100%;
        height: calc(100vh - 186px - 62px - 70px - 60px);
        overflow-y: scroll;
        .tdItem {
          width: 100%;
          height: 50px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #f5f5f5;
          .td {
            flex: 1;
            text-align: center;
          }
          .td:nth-last-child(1) {
            width: 250px;
          }
        }
      }
      .tdVue::-webkit-scrollbar {
        width: 0;
      }
      .paginationVue {
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  </style>